<template>
  <div class="vip-container">
    <div class="vip-header">
      <h1><i class="fas fa-crown"></i> 母校行尊享会员</h1>
      <p class="subtitle">专属于校友的特别礼遇</p>
    </div>

    <div class="vip-content">
      <!-- 会员价格 -->
      <div class="section pricing-section">
        <h2><i class="fas fa-tag"></i> 会员办理价格</h2>
        <div class="price-cards">
          <div class="price-card" v-for="(item, index) in pricing" :key="index">
            <div class="price-header">
              <h3>{{ item.name }}</h3>
              <div class="duration">{{ item.duration }}</div>
            </div>
            <div class="price-amount">
              <span class="currency">¥</span>
              <span class="number">{{ item.price }}</span>
            </div>
            <ul class="price-features">
              <li v-for="(feature, fIndex) in item.features" :key="fIndex">{{ feature }}</li>
            </ul>
            <button class="join-btn" @click="showJoinDialog(item)">
              立即加入
            </button>
          </div>
        </div>
      </div>

      <!-- 会员福利 -->
      <div class="section benefits-section">
        <h2><i class="fas fa-gift"></i> 会员专属福利</h2>
        <div class="benefits-grid">
          <div class="benefit-item" v-for="(benefit, index) in benefits" :key="index">
            <div class="benefit-icon">
              <i :class="benefit.icon"></i>
            </div>
            <h3>{{ benefit.title }}</h3>
            <p>{{ benefit.description }}</p>
          </div>
        </div>
      </div>

      <!-- 会员优惠 -->
      <div class="section discounts-section">
        <h2><i class="fas fa-percentage"></i> 会员优惠待遇</h2>
        <div class="discounts-list">
          <div class="discount-item" v-for="(discount, index) in discounts" :key="index">
            <div class="discount-badge">{{ discount.rate }}折</div>
            <div class="discount-content">
              <h3>{{ discount.title }}</h3>
              <p>{{ discount.description }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 会员礼包 -->
      <div class="section gifts-section">
        <h2><i class="fas fa-box-open"></i> 会员迎新礼包</h2>
        <div class="gifts-carousel">
          <div class="gift-item" v-for="(gift, index) in gifts" :key="index">
            <div class="gift-image">
              <img :src="gift.image" :alt="gift.name">
            </div>
            <div class="gift-info">
              <h3>{{ gift.name }}</h3>
              <p>{{ gift.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加入会员对话框 -->
    <div class="dialog-overlay" v-if="showDialog" @click.self="closeDialog">
      <div class="join-dialog">
        <button class="close-btn" @click="closeDialog">&times;</button>
        <h2>加入{{ selectedPlan.name }}会员</h2>
        <div class="dialog-content">
          <p>您将享受以下特权：</p>
          <ul>
            <li v-for="(feature, index) in selectedPlan.features" :key="index">{{ feature }}</li>
          </ul>
          <div class="price-summary">
            总价：<span class="total-price">¥{{ selectedPlan.price }}</span>
          </div>
          <form @submit.prevent="submitMembership">
            <div class="form-group">
              <label for="name">姓名</label>
              <input type="text" id="name" v-model="formData.name" required>
            </div>
            <div class="form-group">
              <label for="phone">手机号</label>
              <input type="tel" id="phone" v-model="formData.phone" required>
            </div>
            <div class="form-group">
              <label for="email">邮箱</label>
              <input type="email" id="email" v-model="formData.email" required>
            </div>
            <button type="submit" class="submit-btn">确认加入</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import image52 from'../../assets/52.jpg'
import image53 from '../../assets/53.jpg'
import image54 from'../../assets/54.jpg'
import image55 from'../../assets/55.jpg'


export default {
  name: 'VipPage',
  setup() {
    const showDialog = ref(false);
    const selectedPlan = ref({});
    const formData = ref({
      name: '',
      phone: '',
      email: ''
    });

    const pricing = ref([
      {
        name: '年度会员',
        duration: '12个月有效期',
        price: '588',
        features: [
          '所有基础活动9折优惠',
          '优先预约特权',
          '每年2次免费校史馆讲解',
          '迎新礼包一份'
        ]
      },
      {
        name: '双年会籍',
        duration: '24个月有效期',
        price: '988',
        features: [
          '所有基础活动8.5折优惠',
          'VIP专属活动通道',
          '每年4次免费校史馆讲解',
          '豪华迎新礼包+纪念册'
        ]
      },
      {
        name: '终身会员',
        duration: '永久有效',
        price: '3888',
        features: [
          '所有活动8折优惠',
          '永久优先预约权',
          '无限次免费校史馆讲解',
          '豪华礼包+定制纪念品'
        ]
      }
    ]);

    const benefits = ref([
      {
        icon: 'fas fa-calendar-alt',
        title: '优先预约',
        description: '所有活动享有提前72小时预约特权'
      },
      {
        icon: 'fas fa-ticket-alt',
        title: '专属折扣',
        description: '参与活动享受会员专属折扣价格'
      },
      {
        icon: 'fas fa-user-shield',
        title: '专属客服',
        description: '一对一VIP客服全程服务'
      },
      {
        icon: 'fas fa-parking',
        title: '停车特权',
        description: '校园内专属停车位使用权'
      },
      {
        icon: 'fas fa-utensils',
        title: '餐饮优惠',
        description: '校内食堂及合作餐厅专属折扣'
      },
      {
        icon: 'fas fa-gift',
        title: '生日礼遇',
        description: '生日当月赠送特别纪念礼品'
      }
    ]);

    const discounts = ref([
      {
        rate: 8,
        title: '校园活动',
        description: '所有校内导览、座谈会等活动享受8折优惠'
      },
      {
        rate: 8.5,
        title: '户外活动',
        description: '徒步、野营等户外活动享受85折优惠'
      },
      {
        rate: 7.5,
        title: '纪念品商店',
        description: '校内纪念品商店购物享受75折优惠'
      },
      {
        rate: 9,
        title: '餐饮服务',
        description: '校内食堂及合作餐厅消费享受9折优惠'
      }
    ]);

    const gifts = ref([
      {
        name: '校徽礼盒',
        description: '包含校徽、校训书签等精美纪念品',
        image:image52
      },
      {
        name: '纪念画册',
        description: '收录校园历史变迁的精美画册',
        image: image53
      },
      {
        name: '定制帆布包',
        description: '印有校徽的实用帆布手提包',
        image: image54
      },
      {
        name: '校友卡',
        description: '专属校友身份识别卡，享受多重特权',
        image:image55
      }
    ]);

    const showJoinDialog = (plan) => {
      selectedPlan.value = plan;
      showDialog.value = true;
    };

    const closeDialog = () => {
      showDialog.value = false;
    };

    const submitMembership = () => {
      // 这里可以添加提交表单的逻辑
      alert(`感谢${formData.value.name}申请成为${selectedPlan.value.name}会员！我们将尽快与您联系。`);
      closeDialog();
      formData.value = { name: '', phone: '', email: '' };
    };

    return {
      pricing,
      benefits,
      discounts,
      gifts,
      showDialog,
      selectedPlan,
      formData,
      showJoinDialog,
      closeDialog,
      submitMembership
    };
  }
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

.vip-container {
  font-family: 'Noto Serif SC', serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  color: #333;
}

.vip-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 30px 0;
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1) 0%, rgba(231, 76, 60, 0.1) 100%);
  border-radius: 10px;
}

.vip-header h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 10px;
}

.vip-header h1 i {
  color: #f1c40f;
  margin-right: 10px;
}

.subtitle {
  font-size: 1.2rem;
  color: #7f8c8d;
}

.section {
  margin-bottom: 50px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.section h2 {
  font-size: 1.8rem;
  color: #2c3e50;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 2px solid #3498db;
}

.section h2 i {
  margin-right: 10px;
  color: #3498db;
}

/* 价格卡片样式 */
.price-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
}

.price-card {
  background: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-top: 5px solid #3498db;
}

.price-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.price-header {
  margin-bottom: 20px;
}

.price-header h3 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin: 0;
}

.duration {
  font-size: 0.9rem;
  color: #7f8c8d;
}

.price-amount {
  font-size: 2.5rem;
  color: #e74c3c;
  margin: 20px 0;
}

.currency {
  font-size: 1.5rem;
  vertical-align: top;
}

.price-features {
  list-style: none;
  padding: 0;
  margin: 25px 0;
}

.price-features li {
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
}

.price-features li:last-child {
  border-bottom: none;
}

.join-btn {
  width: 100%;
  padding: 12px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.join-btn:hover {
  background: #2980b9;
}

/* 福利网格样式 */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.benefit-item {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.benefit-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  background: rgba(52, 152, 219, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-icon i {
  font-size: 1.8rem;
  color: #3498db;
}

.benefit-item h3 {
  font-size: 1.3rem;
  margin: 15px 0;
  color: #2c3e50;
}

/* 优惠列表样式 */
.discounts-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.discount-item {
  display: flex;
  align-items: center;
  background: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.discount-badge {
  width: 60px;
  height: 60px;
  background: #e74c3c;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin-right: 20px;
  flex-shrink: 0;
}

.discount-content h3 {
  font-size: 1.2rem;
  margin: 0 0 5px;
  color: #2c3e50;
}

/* 礼品轮播样式 */
.gifts-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.gift-item {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.gift-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.gift-info {
  padding: 15px;
}

.gift-info h3 {
  font-size: 1.2rem;
  margin: 0 0 10px;
  color: #2c3e50;
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.join-dialog {
  background: white;
  border-radius: 10px;
  width: 90%;
  max-width: 500px;
  padding: 30px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #7f8c8d;
}

.join-dialog h2 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 20px;
}

.price-summary {
  font-size: 1.2rem;
  margin: 20px 0;
  text-align: right;
}

.total-price {
  font-size: 1.5rem;
  color: #e74c3c;
  font-weight: bold;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: #2ecc71;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1.1rem;
  margin-top: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: #27ae60;
}

@media (max-width: 768px) {
  .vip-header h1 {
    font-size: 2rem;
  }

  .section {
    padding: 15px;
  }

  .price-cards {
    grid-template-columns: 1fr;
  }
}
</style>